<template>
  <div :class="['artist', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="banner">
      <img class="banner" :src="bannerList?.url" alt="">
    </div>
    <div class="artist-list">
      <ul class="artist-menu">
        <li :class="['content', menuActive === index ? 'active-content' : '']" v-for="(item, index) in menuList" :key="item.data_id" @click="handleMenu(item, index)">
          {{ item.name }}
        </li>
      </ul>
      <!-- pc端 -->
      <div class="artist-content" v-if="artistList.length > 0 && $ua.isFromPc()">
        <div class="box" v-for="(item, index) in artistList" :key="index">
          <div v-for="(littleItem, littleIndex) in item" :key="littleIndex" @mouseover="mouseover(littleItem, index)" :class="['content', active === index ? 'newContent' : '']" :style="{visibility: littleItem.data_id ? '' : 'hidden'}">
            <!-- {{ item }} -->
            <el-image v-if="littleItem.data_id" fit="cover" :src="littleItem.photo" alt="" class="img">
              <div slot="error" class="image-slot">
                <img style="width: 100%;height: 100%" src="../../static/artShop/basis/art-shop.png" alt="">
              </div>
            </el-image>
            <div class="desc" v-if="$ua.isFromPc()">
              <div class="mark">

              </div>
              <div class="name">
                {{ littleItem.name }}
              </div>
              <div class="foot clearfix">
                <span>{{ littleItem.works_total + '件作品' }}</span>
                <span class="follow">
                  <img src="@/static/img/follow_white.png" alt="">
                  {{ littleItem.focus_total }}
                </span>
              </div>
            </div>
            <div v-else class="desc">
              <div class="name">
                {{ littleItem.name }}
              </div>
              <div class="foot">
                <p>作品<span>{{ littleItem.works_total }}</span></p>
                <p>粉丝<span>{{ littleItem.focus_total }}</span></p>
              </div>
            </div>
          </div>
          <div class="show-content" @click="goArtHome(showImg.data_id)" v-if="active === index && showImg" @mouseleave="mouseleave">
            <el-image v-if="showImg.data_id" :src="showImg.photo" alt="" fit="cover" class="img">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div class="info">
              <div class="name">
                {{ showImg.name }}
              </div>
              <div class="desc">
                <p>作品<span>{{ showImg.works_total }}</span></p>
                <p>粉丝<span>{{ showImg.focus_total }}</span></p>
              </div>
              <div class="img-list">
                <el-image v-for="(imgItem, imgIndex) in artWorkList" :src="imgItem.thumbnail" :key="imgIndex" fit="cover" alt="" />
              </div>
              <div class="info-follow" @click.stop="(e) => handleFollow(showImg.is_focus, showImg.data_id, e)">
                <img v-if="activeArt == showImg.data_id || showImg.is_focus == 1" src="@/static/img/follow_active.png" alt="">
                <img v-else src="@/static/img/follow.png" alt="">
                关注
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 移动端 -->
      <div v-else-if="artistList.length > 0 && !$ua.isFromPc()" class="artist-content">
        <div class="box">
          <div v-for="(littleItem, littleIndex) in artistList" :key="littleIndex" class="content" @click="goArtHome(littleItem.data_id)">
            <!-- {{ item }} -->
            <el-image v-if="littleItem.data_id" fit="cover" :src="littleItem.photo" alt="" class="img" />
            <div class="desc" v-if="$ua.isFromPc()">
              <div class="mark">

              </div>
              <div class="name">
                {{ littleItem.name }}
              </div>
              <div class="foot clearfix">
                <span>{{ littleItem.works_total + '件作品' }}</span>
                <span class="follow">
                  <img src="@/static/img/follow_white.png" alt="">
                  {{ littleItem.focus_total }}
                </span>
              </div>
            </div>
            <div v-else class="desc">
              <div class="name">
                {{ littleItem.name }}
              </div>
              <div class="foot">
                <p>作品<span>{{ littleItem.works_total }}</span></p>
                <p>粉丝<span>{{ littleItem.focus_total }}</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-empty style="margin: 0 auto" v-else description="暂无数据"></el-empty>
    </div>
    <div v-if="$ua.isFromPc()" class="pagination-box">
      <el-pagination
        class="pagination"
        :page-size="tablePage.pageSize"
        :current-page="tablePage.pageNum"
        :total="tablePage.total"
        @current-change="handlePage"
        hide-on-single-page
        background
        layout="prev, pager, next"
      >
      </el-pagination>
    </div>
    <div @click="lookMore" v-else class="look-more" v-show="this.artistList.length < this.tablePage.total">
      查看更多
    </div>
  </div>
</template>

<script>
import {getImgUrl} from '@/utils/downloadFile'
export default {
  scrollToTop: true,
  // 在路由匹配组件渲染之前会先执行中间件处理
  // middleware: 'authenticated',
  name: 'artist',
  data() {
    return {
      bannerList: {},
      // menuList: [
      //   '书法作品',
      //   '绘画作品',
      //   '文学作品',
      //   '摄影作品',
      //   '舞蹈作品',
      //   '戏剧作品',
      //   '工艺美术',
      //   '非遗传承'
      // ], // 左侧菜单
      imgList: [

      ], // 选中艺术家展开时候的作品列表
      artWorkList: [],
      artistList: [], // 艺术家数据列表
      // showDesc: false,
      active: '', // 鼠标移入的元素
      showImg: {}, // 鼠标移入的数据
      menuActive: '', // 左侧选中的菜单
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 12, // 每页多少条
        total: 0 // 总记录数
      },
      menuList: [],
      type: null,
      followActive: false,
      activeArt: '',
      worksCache: {}
    }
  },
  // async asyncData({ $api }) {
  //   const res = await $api.getProductType({})
  //   if (res.status == '$SUCCESS') {
  //     return {
  //       menuList: res.result.item_list.filter(item => item.parent_id == -1)
  //     }
  //   }
  // },
  mounted() {
    // this.artList()
    this.bannerList = this.$store.state.router.router[0].children.filter(item => {
      return item.path === location.pathname
    })[0].meta.banner_list[0]
    this.getProductType()
  },
  methods: {
    getImgUrl,
    async getProductType() {
      const res = await this.$api.getProductType({ art_type: 1 })
      if (res.status == '$SUCCESS') {
        this.menuList = res.result.item_list.filter(item => item.parent_id == -1)
        this.handleMenu(this.menuList[0], 0)
      }
    },
    artList() {
      const params = {
        page_num: this.tablePage.pageNum,
        page_count: this.$ua.isFromPc() ? this.tablePage.pageSize : 4,
        type: this.type
      }
     this.$api.artList(params).then(res => {
       this.tablePage.total = res.result.total_count
        if (this.$ua.isFromPc()) {
          this.$set(this, 'artistList', [])
          for (var i = 0; i < res.result.item_list.length; i += 3) {
            this.artistList.push(res.result.item_list.slice(i, i + 3));
          }
          this.artistList.forEach(item => {
            let count = 3 - item.length
            for(let i = 0;i < count;i++) {
              item.push({})
            }
          })
        } else {
          res.result.item_list.forEach(item => {
            this.artistList.push(item)
          })
        }
     })
    },
    // 鼠标进入某个艺术家模块
    async mouseover(item, index) {
      if (this.$ua.isFromPc()) {
        this.active = index
        // this.showDesc = true
        this.showImg = item
        const params = {
          work_recommend: 1,
          art_id: item.data_id
        }
        let artList = []
        this.$set(this, 'artWorkList', [])
        if (this.worksCache[item.data_id]) {
          this.artWorkList = this.worksCache[item.data_id]
        } else {
          const worksCache = await this.getArtWorkList(params)
          this.worksCache[item.data_id] = worksCache
          this.artWorkList = worksCache
        }
      }
      // this.getArtWorkList(params)
      // artList.forEach(item => {
      //   this.imgList.push(this.getImgUrl('works', item.data_id, 'thumbnail'))
      // })
    },
    async getArtWorkList(params) {
      const res = await this.$api.artWorkList(params)
      if (res.status == '$SUCCESS') {
        let response = Array.isArray(res.result.item_list) ? res.result.item_list.splice(0, 3) : []
        return response
      }
    },
    // 鼠标离开艺术家模块
    mouseleave() {
      this.active = ''
      this.showImg = ''
    },
    // 点击左侧菜单
    handleMenu(item, index) {
      this.type = item.data_id
      this.menuActive = index
      this.$set(this, 'artistList', [])
      this.handlePage(1)
    },
    // 翻页
    handlePage(currentPage) {
      this.active = ''
      this.tablePage.pageNum = currentPage
      this.artList()
    },
    // 查看更多
    lookMore() {
      const currentPage = this.tablePage.pageNum + 1
      this.handlePage(currentPage)
    },
    handleFollow(is_focus, data_id, e) {
      if(this.$store.state.user.token) {
        if (!is_focus) {
          this.activeArt = data_id
          this.followActive = !this.followActive
          this.$api.artFocus({ art_id: data_id }, {}).then(res => {
            if (res.status == "$SUCCESS") {
              this.artList()
              this.$message.success('关注成功')
            }
          })
        } else {
          this.$message.warning('您已关注当前艺术家')
        }
      } else {
        this.$message.warning('请您先登陆')
        this.$store.commit("user/SET_LOGIN", true)
      }
    },
    goArtHome(id) {
      this.mouseleave()
      this.$router.push({ path: '/personal', query: { id } })
    }
  }
}
</script>

<style lang="less" scoped>
  .artist {
    &.z-web {
      padding-bottom: 120px;

      .pagination-box {
        text-align: center;

        .pagination {
          display: inline-block;
          margin: 100px 0 0 200px;
        }

        ::v-deep(.el-pagination.is-background .el-pager li) {
          border: 1px solid #999;
          color: #999;
          border-radius: 0;
          margin: 0 10px;
        }

        ::v-deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
          color: #fff;
          background: #999;
        }

        ::v-deep(.el-pagination.is-background .btn-prev) {
          border: 1px solid #999;
        }

        ::v-deep(.el-pagination.is-background .btn-next) {
          border: 1px solid #999;
        }
      }

      .banner {
        width: 100%;
        height: 600px;
        object-fit: cover;
      }

      .artist-list {
        padding: 120px 276px 0;
        display: flex;

        .artist-menu {
          height: 100%;
          margin-right: 90px;

          .content {
            width: 130px;
            line-height: 24px;
            margin-bottom: 37px;
            font-size: 24px;
            color: #999;
            cursor: pointer;

            &.active-content {
              color: #000;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        .artist-content {
          width: 1152px;

          .box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-bottom: 60px;

            &:last-child {
              margin-bottom: 0;
            }

            .content {
              width: 360px;
              height: 360px;
              transition: all 1s;
              position: relative;

              ::v-deep(.el-image) {
                width: 360px;
                height: 360px;
              }

              &.newContent {
                opacity: 0;
              }

              .img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
              }

              .desc {
                width: 100%;
                height: 88px;
                position: absolute;
                bottom: 0;
                color: #fff;

                .mark {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  background-color: #000000;
                  opacity: 0.5;
                }

                .name,
                .foot {
                  position: relative;
                  z-index: 99;
                  margin-left: 24px;
                }

                .name {
                  font-size: 24px;
                  margin-top: 19px;
                  margin-bottom: 15px;
                  line-height: 20px;
                }

                .foot {
                  font-size: 16px;

                  .follow {
                    float: right;
                    margin-right: 25px;

                    img {
                      width: 30px;
                      position: relative;
                      top: -2px;
                    }
                  }
                }
              }

              .show-content {
                width: 100%;
              }
            }

            .show-content {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              background-color: #E8E8E8;

              .img {
                width: 260px;
                height: 260px;
                // position: absolute;
                border-radius: 50%;
                margin: 50px;
              }

              .info {
                width: 66%;
                display: inline-block;
                vertical-align: top;
                margin-top: 50px;
                color: #333;
                position: relative;

                .name {
                  letter-spacing: 5px;
                  margin-bottom: 19px;
                }

                .desc,
                p {
                  display: inline-block;
                  font-size: 16px;
                  margin-right: 32px;
                  line-height: 19px;

                  &:last-child {
                    margin-right: 0;
                  }
                  span {
                    font-size: 24px;
                    // font-family: '宋体';
                    display: inline-block;
                    margin-left: 6px;
                    vertical-align: text-bottom;
                  }
                }

                .img-list {
                  display: flex;
                  justify-content: space-between;
                  margin-top: 30px;
                  ::v-deep(.el-image) {
                    width: 224px;
                    height: 168px;
                    // margin-right: 35px;

                    &:last-child {
                      margin-right: 0;
                    }
                  }
                }

                .info-follow {
                  width: 226px;
                  height: 42px;
                  font-size: 16px;
                  border: 1px solid #666;
                  text-align: center;
                  color: #000;
                  position: absolute;
                  right: 0;
                  top: 10px;
                  line-height: 42px;
                  cursor: pointer;

                  img {
                    width: 30px;
                    position: relative;
                    top: -2px;
                  }
                }
              }
            }
          }
        }
      }
    }

    &.z-phone {
      padding-bottom: pxtorem(80);
      .banner {
        width: 100%;
        // height: pxtorem(388);
      }

      .artist-list {
        padding: pxtorem(40) 0 pxtorem(36);
        .artist-menu {
          display: flex;
          flex-wrap: wrap;

          .content {
            font-size: pxtorem(24);
            font-weight: bold;
            color: #898989;
            flex: 25%;
            text-align: center;
            margin-bottom: pxtorem(32);

            &.active-content {
              color: #000;
              position: relative;
            }

            &.active-content::after {
              content: '';
              width: pxtorem(108);
              height: pxtorem(4);
              background-color: #000;
              position: absolute;
              bottom: pxtorem(-6);
              left: pxtorem(40);
            }
          }
        }

        .artist-content {
          padding: 0 pxtorem(24);

          .box {
            .content {
              width: 100%;
              height: pxtorem(200);
              background: #FFFFFF;
              box-shadow: 0px 3px 16px 0px rgba(146,146,146,0.35);
              margin-bottom: pxtorem(24);
              padding: pxtorem(40);

              .img {
                width: pxtorem(120);
                height: pxtorem(120);
                display: inline-block;
              }

              .desc {
                display: inline-block;
                color: #333;
                font-weight: 600;
                vertical-align: top;
                margin-top: pxtorem(25);
                margin-left: pxtorem(32);

                .name {
                  font-size: pxtorem(28);
                  margin-bottom: pxtorem(20);
                }

                .foot {
                  p {
                    display: inline-block;
                    font-size: pxtorem(16);
                    margin-right: pxtorem(32);

                    span {
                      display: inline-block;
                      margin-left: pxtorem(6);
                      font-size: pxtorem(24);
                    }
                  }
                }
              }
            }
          }
        }
      }

      .look-more {
        width: pxtorem(280);
        height: pxtorem(80);
        background: #fff;
        border: 1px solid #999;
        font-size: pxtorem(30);
        font-weight: bold;
        color: #999;
        line-height: pxtorem(80);
        text-align: center;
        margin: 0 auto;
      }
    }
  }
</style>
